<template>
  <div class="shop-content template">
    <div class="height-100"></div>
    <div class="diy-bg-main">
      <div class="phone-bg-box width-375">
        <div class="top-bg">
          <i class="el-icon-arrow-left"></i>
          <span>搜索</span>
        </div>
        <div class="pad-15">
          <!-- 搜索 -->
          <div class="search-box flex">
            <div class="search-bg">
              <i class="el-icon-search"></i>
              <span>点击输入搜索内容</span>
            </div>
            <span class="mar-l-20 font-w font-16">搜索</span>
          </div>
          <!-- 历史记录 -->
          <div class="flex-col mar-t-15">
            <h4>历史搜索</h4>
            <div class="mar-l--10 flex flex-wrap">
              <span class="word-box mar-l-10 mar-b-10" v-for="(item, index) of historyList" :key="index">
                {{item}}
              </span>
            </div>
          </div>
          <!-- 热门搜索 -->
          <div>
            <h4>热门搜索</h4>
            <div class="mar-l--10 flex flex-wrap">
              <span class="word-box hot-word mar-l-10 mar-b-10" v-for="(item, index) of hotWordsList" :key="index + '-hot'">
                {{item.hotWord}}
              </span>
              <span class="word-box mar-l-10 mar-b-10" v-for="(item, index) of normalWordsList" :key="index + '-normal'">
                {{item.hotWord}}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    customPage: {
      deep: true,
      immediate: false,
      handler() {
        this.initEls()
      }
    }
  },
  props: {
    customPage: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      historyList: ['奶茶果汁', '浪漫鲜花', '披萨', '保温水壶'],
      hotWordsList: [],
      normalWordsList: []
    }
  },
  created() {
  },
  mounted() {
    this.initEls()
  },
  methods: {
    initEls() {
      const historyWords = this.customPage.historyWords
      if (historyWords) {
        this.hotWordsList = historyWords.hotWordsList
        this.normalWordsList = historyWords.normalWordsList
      }
    }
  }
}
</script>

<style lang="less" scoped>
@sideWhite: 66px;
@sideSubWhite: 298px;
@sideRightWhite: 390px;
@height: 60px;
.shop-content{
  padding-left: @sideWhite + @sideSubWhite;
  padding-right: @sideRightWhite;
  box-sizing: border-box;
  .diy-bg-main{
    position: relative;
    min-height: 670px;
    padding-top: 1px;
    padding-left: calc(50% - 188px);
    box-sizing: border-box;
    .phone-bg-box {
      border: 1px solid #ddd;
      min-height: 667px;
      background: #fff;
      .top-bg {
        background:url('') 0 0 no-repeat;
        background-size: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        position: relative;
        &>i {
          position: absolute;
          left: 4px;
          z-index: 10;
          font-size: 20px;
          top: 29px;
        }
        &>span {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 700;
          padding-top: 26px;
        }
      }
      .search-box {
        align-items: center;
        .search-bg {
          width: 290px;
          padding-left: 10px;
          padding-right: 10px;
          padding-top: 4px;
          padding-bottom: 4px;
          border-radius: 15px;
          background: #F4F4F4;
        }
      }
      .word-box {
        min-width: 30px;
        background: #F4F4F4;
        border-radius: 12px;
        padding: 2px;
        padding-left: 12px;
        padding-right: 12px;
        &.hot-word{
          background: #FFF3F3;
          color: #eb2828;
        }
      }
    }
  }
}
</style>
